define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Template, Echarts) {
    var echartArr = [];

    var dateRange = {'order':''};
    var Controller = {
        index: function () {
            // 表单绑定事件
            Form.api.bindevent($("form[role=form]"));
            setTimeout(function () {
                Controller.api.getChartData({'type': 'order', 'dateType': 'day', 'dateRange': ''});
            },500)
            //切换显示类型
            // $(document).on("click", ".btn-filter", function () {
            //     $(this).addClass('btn-danger').removeClass('btn-success').siblings('.btn-filter').addClass('btn-success').removeClass('btn-danger');
            //     var type = $(this).closest('.echart').data('type');
            //     var dateType = $(this).data('type');
            //     var range = $(this).siblings('.input-group').children(".datetimerange").val();
            //     dateRange[type] = range;
            //     var data = {'type': type, 'dateType': dateType, 'dateRange': range};
            //     Controller.api.getChartData(data);
            // });

            // 日历失焦
            $(".datetimerange").on("blur", function () {
                var type = $(this).closest('.echart').data('type');

                //优化 触发多次失焦
                if(dateRange[type] == $(this).val() && dateRange[type] != '') return false;

                var dateType = $(this).closest('.input-group').siblings('.btn-danger').data('type');
                var range = $(this).val();
                dateRange[type] = range;
                var data = {'type': type, 'dateType': dateType, 'dateRange': range};
                Controller.api.getChartData(data);
            });

            //刷新
            $(document).on("click", ".btn-refresh2", function () {
                var type = $(this).closest('.echart').data('type');
                var dateType = $(this).siblings('.btn-danger').data('type');
                var range = $(this).siblings('.input-group').children(".datetimerange").val();
                dateRange[type] = range;
                var data = {'type': type, 'dateType': dateType, 'dateRange': range};
                Controller.api.getChartData(data);
            });
            //窗口切换
            $(window).resize(function(){
                //自适应窗口
                for (var key in echartArr) {
                    echartArr[key].resize();
                }
            });
        },
        api: {
            //获取表格所需数据
            getChartData: function(data){
                Fast.api.ajax({
                    url: 'xilujob/dashboard/chart_data',
                    data: data
                }, function (res) {
                    //if(data.dateRange == ''){
                    $("#echart_"+data.type).prev().find('.datetimerange').val(res.range);
                    dateRange[data.type] = res.range;
                    //}
                    Controller.api.charts(data, res);
                    return false;
                });
            },

            // 基于准备好的dom，初始化echarts实例
            charts: function (data, res) {
                var dom = 'echart_' + data.type;
                var myChart = Echarts.init(document.getElementById(dom), 'walden');
                var series = res.series;
                var seriesData = [], item = {};
                for(var i = 0; i < res.legend.length; i++){
                    item = {
                        name: res.legend[i],
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 1.5
                            }
                        },
                        data: series[i]
                    };
                    seriesData.push(item);
                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: res.legend,
                        left: '0'
                    },
                    color:['#08B89A','#FE973D','#4AA4DB','#FE6075','#B69B72'],
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false,lang:['数据视图','关闭','刷新']},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable:true,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: res.xAxis
                    },
                    yAxis: {
                        boundaryGap: [0, '100%'],
                        type: 'value'
                    },
                    optionToContent: function(opt) {
                        var axisData = opt.xAxis[0].data;
                        var series = opt.series;
                        var table = '<table style="width:100%;text-align:center"><tbody><tr>'
                            + '<td>时间</td>'
                            + '<td>' + series[0].name + '</td>'
                            + '<td>' + series[1].name + '</td>'
                            + '<td>' + series[2].name + '</td>'
                            + '<td>' + series[3].name + '</td>'
                            + '</tr>';
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            table += '<tr>'
                                + '<td>' + axisData[i] + '</td>'
                                + '<td>' + series[0].data[i] + '</td>'
                                + '<td>' + series[1].data[i] + '</td>'
                                + '<td>' + series[2].data[i] + '</td>'
                                + '<td>' + series[3].data[i] + '</td>'
                                + '</tr>';
                        }
                        table += '</tbody></table>';
                        return table;
                    },
                    contentToOption: function(){
                        Controller.api.getChartData(data);
                        return false;
                    },
                    grid: [{
                        left: '15',
                        top: '25',
                        right: '40',
                        bottom: '10',
                        containLabel: true
                    }],
                    series: seriesData
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                echartArr[data.type] = myChart;
            }
        }
    };
    return Controller;
});
